<!-- 组件方式引入header -->
@component('backend.index.frame')
    @slot('title')
        <title>{{$title}}</title>
    @endslot
    @slot('script')
        <!-- 页面自身js -->
        <script type="text/javascript" src="/static/js/{{$identity}}.js"></script>
        @endslot
        @endcomponent
        </head>
        <body class="hold-transition sidebar-mini layout-fixed">
        <div class="wrapper">
            <!--顶部栏目-->
            <?php require_once resource_path('views') . '/backend/index/navbar.blade.php'; ?>
            <!-- 组件方式,引入侧边栏 -->
            @component('backend.index.sidebar')
                @slot('identity'){{$identity}}@endslot
                @slot('sidebar'){{$sidebar}}@endslot
            @endcomponent

            <div class="content-wrapper" id="jd_jingxuan">
                <!-- 内容标题（页面标题） -->
                <section class="content-header">
                    <div class="container-fluid">
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <h1>京东</h1>
                            </div>
                            <div class="col-sm-6">
                                <ol class="breadcrumb float-sm-right">
                                    <li class="breadcrumb-item"><a href="javascript:;">主页</a></li>
                                    <li class="breadcrumb-item active">京东精选商品</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 主体内容 -->
                <section class="content">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="label control-label">一级类别:</label>
                                    <select class="form-control" v-model="cid1">
                                        <option value="-1">全部</option>
                                        <option v-for="item in category_1_list" :value="item.jd_category_id">@{{item.name}}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="label control-label">二级类别:</label>
                                    <select class="form-control" v-model="cid2">
                                        <option value="-1">全部</option>
                                        <option v-for="item in category_2_list" :value="item.jd_category_id">@{{item.name}}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="label control-label">三级类别:</label>
                                    <select class="form-control" v-model="cid3">
                                        <option value="-1">全部</option>
                                        <option v-for="item in category_3_list" :value="item.jd_category_id">@{{item.name}}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="label control-label">关键字:</label>
                                    <div class="input-group">
                                        <input type='text' class="form-control" v-model="keyword" />
                                        <button class="btn btn-primary btn-sm" @click="getDataList">搜索</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row" style="margin-top: 20px;">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-body">
                                        <input type="hidden" id="lcm_lingpai" value="{{csrf_token()}}">
                                        <table class="table table-bordered table-hover text-center">
                                            <tbody v-if="datalist.length > 0">
                                                <tr v-for="(item, index) in datalist">
                                                    <td v-for="sub_item in item">
                                                        <a :href="'http://' + sub_item.materialUrl" target="_blank">
                                                            <div style="width: 20%; height: 20%;display: table-cell; text-align: center">
                                                                <img :src="sub_item.img" style="width: 100%;"/>
                                                            </div>
                                                            <p style="text-align: left; font-size: 12px; margin-bottom: 10px;">@{{ sub_item.skuName }}</p>
                                                            <p style="text-align: left; font-size: 16px; margin-bottom: 10px;">@{{ sub_item.shopName }} <span style="color: red">￥ @{{ sub_item.price }} 元</span></p>
                                                            <p style="text-align: left; font-size: 12px; margin-bottom: 10px;">佣金: ￥ <span style="color: red">@{{ sub_item.commission }}</span> 元</p>
                                                        </a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <tbody v-else>
                                                <tr>
                                                    <td colspan="4" class="text-center">暂无数据</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="card-footer">
                                        @component('backend.index.pagination')
                                        @endcomponent
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!--底部栏目-->
            <?php require_once resource_path('views') . '/backend/index/footer.blade.php'; ?>
        </div>
        </body>
        </html>
